<template>
	<!-- 光能杯评选首页 -->
	<view class="bg-white">
		<!-- 介绍 -->
		<view class="" v-if="tabCur == 2">介绍</view>
		<view class="" v-else>
			<u-sticky>
				<view class="bg-white">
					<view class="px-2 py-1"><search-view color="#163566" placeholder="企业名称/编号" @search="searchChange" @clear="searchChange('')"></search-view></view>
				</view>
			</u-sticky>
			<view class="cup"><cup v-if="activityId" :activity-id="activityId" :tab-cur="tabCur" :table-list="tableList" @cupChange="cupChange"></cup></view>
			<view class="container">
				<!-- 首页列表 -->
				<view class="mt-3" v-if="tabCur == 0">
					<view class="font-small c_9">
						<view class="">友情提示：</view>
						<view class="">1、参评企业排序不分先后，仅为首字母倒序</view>
						<view class="">2、投票过程中，企业排序会根据票数自动更新</view>
					</view>
					<view class="mt-1 flex flex-wrap bg-white">
						<view
							class="company_cup rounded p-1 text-center mb-2"
							v-for="item of cupCompany"
							:key="item.id"
							@click="goPages('/subPages/my/gnb_vote/vote_detail?prize_id=' + item.prize_id + '&company_id=' + item.id + '&activityId=' + activityId)"
						>
							<view class="top_cup w-100 text-center text-white font-sm py-1">{{ item.prize_title }}</view>
							<view class="text-right font-small flex justify-end align-center">
								<image src="@/static/img2/home/cup_num.png" mode="aspectFit"></image>
								{{ item.id }}
							</view>
							<view class="logo font-sm py-2"><image :src="item.company_logo" mode="aspectFill"></image></view>
							<view class="font text_hidden1 mt-2">{{ item.company_name }}</view>
							<view class="font_22 c_9 mt-2 text_hidden1">{{ item.company_slogan }}</view>
							<view class="font_24 mt-2">当前票数：{{ item.num }}</view>
						</view>
					</view>
				</view>
				<!-- 排行列表 -->
				<view class="px-2" v-if="tabCur == 1">
					<view class="rank_tit font my-4 flex align-center justify-center">最具影响力分布式光伏企业</view>
					<view
						class="company_rank flex rounded_15 mb-3"
						v-for="item of rankCompany"
						:key="item.id"
						@click="goPages('/subPages/my/gnb_vote/vote_detail?prize_id=' + prizeId + '&company_id=' + item.id + '&activityId=' + activityId)"
					>
						<view class="logo"><image :src="item.company_logo" mode="aspectFit"></image></view>
						<view class="cont p-2 flex flex-column justify-between">
							<view class="font">{{ item.company_name }}</view>
							<view class="font_22 mt-1">当前票数：{{ item.num }}</view>
						</view>
					</view>
					<view class="font-small c_9 mb-3">
						<view class="">友情提示：</view>
						<view class="">1、参评企业排序不分先后，仅为首字母倒序</view>
						<view class="">2、投票过程中，企业排序会根据票数自动更新</view>
					</view>
				</view>
			</view>
		</view>

		<tabbar @tabChange="tabChange" :tab-cur="tabCur"></tabbar>
	</view>
</template>

<script>
import searchView from '@/components/search/search.vue';
import cup from '@/subPages/my/gnb_vote/cup.vue';
import tabbar from '@/subPages/my/gnb_vote/tabbar.vue';
import { voteActivityCompany, votePrizeCompanyList, votePrizeList } from '@/api/my/gnb_apply.js';
import { login } from '@/api/login/login';
export default {
	components: { searchView, cup, tabbar },
	data() {
		return {
			tabCur: 0,
			tableList: [], //奖项
			cupCompany: [],
			rankCompany: [],
			activityId: '',
			prizeId: '' //奖项id
		};
	},
	//分享到聊天
	onShareAppMessage(res) {
		return {
			title: '光能杯评选',
			path: '/subPages/my/gnb_vote/vote'
			// imageUrl: this.companyData.user.company_logo
		};
	},

	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: '光能杯评选',
			path: '/subPages/my/gnb_vote/vote'
			// imageUrl: this.companyData.user.company_logo
		};
	},
	onLoad(option) {
		this.activityId = option.activityId;
		this.info();
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	methods: {
		info() {
			let msg = {
				activity_id: this.activityId,
				uid: uni.getStorageSync('userInfo').userId
			};
			// 参评企业
			voteActivityCompany(msg).then(res => {
				if (res.code == 0) {
					this.cupCompany = res.data;
				} else {
					console.log('获取参评企业失败', res.msg);
				}
			});
			// 活动奖项
			votePrizeList({ activity_id: this.activityId }).then(res => {
				if (res.code == 0) {
					this.tableList = res.data;
					// console.log(this.tableList);
				} else {
					uni.$u.toast(res.msg);
				}
			});
		},
		// tabbar
		tabChange(val) {
			this.tabCur = val;
			if (val == 1) {
				this.cupChange(this.tableList[0].prize_id);
			}
		},
		// 奖杯选择
		cupChange(val) {
			this.prizeId = val;
			this.tabCur = 1;
			// 企业排行
			let msg = {
				prize_id: val,
				uid: uni.getStorageSync('userInfo').userId
			};
			votePrizeCompanyList(msg).then(res => {
				// console.log('排行', res);
				if (res.code == 0) {
					this.rankCompany = res.data;
				} else {
					console.log('获取企业排行失败', res.msg);
				}
			});
		},
		searchChange(val) {
			if (!val) {
				uni.$u.toast('请输入要搜索的内容');
				return;
			}
			uni.navigateTo({
				url: '/subPages/my/gnb_vote/vote_search?searchVal=' + val + '&activityId=' + this.activityId
			});
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .u-tabbar__content {
	background-color: #163566 !important;
}
.cup {
	z-index: 10;
	position: relative;
}
::v-deep .t-tr {
	flex-wrap: wrap;
	border: 1px solid #163566;
	border-right: 0;
	border-bottom: 0;
}
::v-deep .t-tr t-td {
	flex: none !important;
	width: calc(100% / 4) !important;
}
::v-deep .t-td {
	/*  #ifdef H5  */
	flex: none !important;
	/*  #endif  */
	width: calc(100% / 4) !important;
	border-width: 1px !important;
	color: #163566;
	padding: 0;
}
.company_cup {
	width: calc((100% / 2) - 11rpx);
	min-height: 320rpx;
	border: 1px solid #163566;
	color: #163566;
	position: relative;
	.top_cup {
		background-color: #163566;
		position: absolute;
		top: 0;
		left: 0;
	}
	.text-right {
		margin-top: 45rpx;
		image {
			width: 35rpx;
			height: 35rpx;
			margin-right: 5rpx;
		}
	}
	.logo {
		width: 150rpx;
		border: 1px solid #163566;
		border-radius: 40rpx;
		margin: 0 auto;
		image {
			width: 145rpx;
			height: 30rpx;
		}
	}
}
.company_cup:nth-child(even) {
	margin-left: 20rpx;
}
.rank_tit::before,
.rank_tit::after {
	content: '';
	background: url('@/static/img2/home/cup_titi.png') no-repeat;
	background-size: 100%;
	width: 30rpx;
	height: 30rpx;
	display: inline-table;
	margin: 0 10rpx;
}
.company_rank {
	border: 1px solid #163566;
	color: #163566;
	height: 150rpx;
	.logo {
		width: 200rpx;
		margin: auto;
		image {
			width: 100%;
			height: 60rpx;
			margin: auto;
		}
	}
	.cont {
		width: calc(100% - 200rpx);
		border-left: 1px solid #163566;
	}
}
</style>
